<template>
	<div class="">
		<button @click="jump">跳转至page01</button>
	</div>
</template>

<script setup lang="ts">
	import { onBeforeMount, ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'

	// const props = defineProps({})
	// const emit = defineEmits([''])

	const router = useRouter()
	const route = useRoute()

	function jump () {
		router.push({
			path: '/page01',
			query: {
				pid: '12345'
			}
		})
	}

	// 没有重定向时，url不显示参数
	console.log('home-route:', route)

	onBeforeMount(() => {
		const { path, query } = route
		console.log('home-onBeforeMount:', route)

		// 以下两种方式在url上均不显示pid参数
		// 1. 直接取query url不显示参数
		// router.replace({
		// 	path,
		// 	query,
		// 	params: {}
		// })

		// 2. 深拷贝也不行
		// router.replace({
		//   path,
		//   query: JSON.parse(JSON.stringify(query))
		// })

		// 以下两种方式url上正常显示pid参数
		// 1. 添加新变量才会显示在url
		// router.replace({
		//   path,
		//   query: {
		//     ...query,
		//     age: 18
		//   }
		// })

		// 2. 将之前参数置空，并重新赋值
		// const newQuery: any = {}
		// Object.keys(query).forEach(key => {
		//   newQuery[key] = query[key]
		//   query[key] = null
		// })
		// router.replace({
		//   path,
		//   query: newQuery
		// })

	})

	// defineExpose({})
</script>

<style lang="less" scoped>

</style>
